<template>
  <div>
    <el-card>
      <CategorySelector :isShowList="isShowList" @changeCategory="changeCategory"></CategorySelector>
    </el-card>
    <el-card style="margin-top: 20px">
      <!--      列表页面-->
      <div v-if="!isShowSpuForm&&!isShowSkuForm">
        <el-button type="primary" icon="el-icon-plus" @click="addToSpu" :disabled="!category3Id">添加SPU</el-button>
        <el-table
          style="width: 100%"
          border
          :data="spuList"

        >
          <el-table-column

            prop="prop"
            align="center"
            type="index"
            label="序号"
            width="80">
          </el-table-column>
          <el-table-column
            prop="spuName"
            label="SPU名称"
            width="width">
          </el-table-column>
          <el-table-column
            prop="description"
            label="SPU描述"
            width="width">
          </el-table-column>
          <el-table-column
            prop="prop"
            label="操作"
            width="width">
            <template slot-scope="{row ,$index}">
              <HintButton type="success" size='mini' icon="el-icon-plus" title="添加SKU" @click="addToSku"></HintButton>
              <HintButton type="warning" size="mini" icon="el-icon-edit" title="修改SPU"
                          @click="updateSpu(row)"></HintButton>
              <HintButton type="info" size="mini" icon="el-icon-info" title="查看SPU的SKU列表"></HintButton>
              <el-popconfirm
                :title="`你确定要删除${row.spuName}吗？`"
                onConfirm="deleteSpu(row)"
              >
                <HintButton slot="reference" type="danger" size="mini" icon="el-icon-delete" title="删除SPU"></HintButton>
              </el-popconfirm>

            </template>


          </el-table-column>

        </el-table>
        <el-pagination
          @current-change="getSpuList"
          @size-change="handleSizeChange"
          style="text-align: center"
          :current-page="page"
          :page-size="limit"
          :pager-count="7"
          :page-sizes="[3,5,10]"
          layout=" prev, pager, next, jumper, ->,sizes, total, slot"
          :total="total" background>
        </el-pagination>
      </div>
      <!--定义添加或者修改的组件 也可以定义两个div-->
      <!--      :visible.sync="isShowSpuForm" 用于父子同步数据用的
      第一种方式:
        父组件写:visible.sync='visible'
        子组件props接收 使用@click='$emit('update:visible',false)
      第二种方式:
        父组件中写:visible="isShowSpuForm" @update:visible="isShowSpuForm=$event"
        子组件props接收 不管用不用先接收 使用@click='$emit('update:visible',false)
      -->
      <SpuForm
        ref="spu"
        v-show="isShowSpuForm"
        :visible="isShowSpuForm"
        @update:visible="isShowSpuForm=$event"
        @backSuccess="backSuccess"
        @cancelBack="cancelBack"
      ></SpuForm>
      <SkuForm v-show="isShowSkuForm"></SkuForm>

    </el-card>
  </div>
</template>

<script>
import SkuForm from "@/views/product/spu/components/SkuForm";
import SpuForm from "@/views/product/spu/components/SpuForm";

export default {
  name: "SpuList",
  components: {
    SkuForm,
    SpuForm
  },
  data() {
    return {
      isShowList: true,// 这个值用来控制三级联动的可操作性的,它没有控制页面的显示
      category1Id: '',
      category2Id: '',
      category3Id: '',
      spuList: [],
      page: 1,
      limit: 3,
      total: 0,
      isShowSpuForm: false,
      isShowSkuForm: false
    }
  },
  methods: {
    changeCategory({categoryId, level}) {
      if (level === 1) {
        //重新选择1级的时候清空2 3级的id及数据列表
        this.category2Id = '',
          this.category3Id = '',
          this.spuList = []
        this.category1Id = categoryId
      } else if (level === 2) {
        this.category3Id = '',
          this.spuList = []
        this.category2Id = categoryId
      } else {
        this.category3Id = categoryId
        this.getSpuList()
      }
    },
    //发请求 获取spuList
    async getSpuList(pager = 1) {
      this.page = pager
      let {page, limit, category3Id} = this
      try {
        const result = await this.$API.spu.getList(page, limit, category3Id)
        if (result.code === 20000 || result.code === 200) {
          this.spuList = result.data.records
          this.total = result.data.total
        } else {
          this.$message.error('获取分页数据失败')
        }
      } catch (error) {
        this.$message.error('获取请求spu失败')
      }
    },
    //分页器
    handleSizeChange(size) {
      this.limit = size
      this.getSpuList()
    },
    //点击添加spu按钮 切换到spu页面
    addToSpu() {
      this.isShowSpuForm = true
      this.$refs.spu.getInitAddSpuFormData(this.category3Id)
    },
    //点击修改按钮 切换到修改页面
    updateSpu(row) {
      this.flag = row.id//设置子组件的标志位
      this.isShowSpuForm = true
      this.$refs.spu.getInitUpdateSpuFormData(row, this.category3Id)
    },
    //点击添加sku 切换到sku页面
    addToSku() {
      this.isShowSkuForm = true
    },
    //删除spu
    async deleteSpu(row) {
      try {
        const result = await this.$API.spu.remove(row.id)
        if (result.code === 200 || result.code === 20000) {
          this.$message.success('删除spu成功')
          await this.getSpuList(this.spuList.length > 1 ? this.page : this.page - 1)
        } else {
          this.$message.error('删除spu失败')
        }
      } catch (error) {
        this.$message.error('删除spu请求失败')
      }
    },
    //子组件回来了
    backSuccess() {
      //判断是怎么返回来的 如果有id是修改过来的 如果没有id是添加页面过来的
      if (this.flag) {
        //修改页面过来的
        this.getSpuList(this.page)
      } else {
        //添加页面过来的
        this.getSpuList()
      }
      this.flag = null //清空标志位
    },
    //修改子组件 取消回来的 清空标志位
    cancelBack() {
      this.flag = null//清空标志位
    }

  }
}
</script>

<style scoped>

</style>
